<template>
  <div  v-loading.fullscreen.lock="loading" class="back_" element-loading-background="rgba(0, 0, 0, 0.8)">     
    <el-form  label-position="left" label-width="0px" class="demo-ruleForm login-container" :model="login" ref="login" >
      <h3 class="title">后台登录</h3>
      <el-form-item style="margin-top:20px" prop="login_name" :rules="filter_rules({required:true})" >
        <el-input type="text"  v-model="login.login_name" @keyup.enter.native="validate('login')" auto-complete="off" placeholder="用戶名"></el-input>
      </el-form-item>
      <el-form-item style="margin-top:20px" prop="pwd" :rules="filter_rules({required:true})">
        <el-input type="password"  v-model="login.pwd" @keyup.enter.native="validate('login')" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="validate('login')">登录</el-button>
      </el-form-item>
      
    </el-form>
  </div>
</template>

<script>
import { mapActions,mapState } from 'vuex' 
export default {
  data() {
    return {
      loading : false ,
      login : {}
    };
  },
  computed: {
      ...mapState(['isLogin'])
  },
  methods: {
    ...mapActions(['loginAction']),
    validate:function (res) {
      this.$refs[res].validate((valid) => {
        if (valid) {
          this.subLogin();
        }else{
          return false;
        }
      });
    },
    subLogin() {
      localStorage.setItem("login", this.login);
      this.loading = true ;
      this.$http.post(`/api/admin/login`, this.login).then(res => {
        this.loading = false ;
        let result = res.data ;
        if(result.code == 100){
          this.loginAction(1);
          this.$notify({
            title: '提示',
            message: '登陆成功',
            type: 'success'
          });
          this.$router.push({ path: '/auth' });
        }
        if(result.code == 101){
          this.$message({
            type: "error",
            message: "用戶名或密码不正确~"
          });
        }
      });
    }
  },
  created() {
  }
};
</script>

<style scoped lang="scss">
.back_ {
  width: 100%;
  height: 100%;
}
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
</style>